<template>
  <div class="Login">
    <div class="Loginfrom">
      <h3>叩丁狼商品管理系统</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
            :prefix-icon="Lock"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="btns" type="primary" @click="submitForm"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Lock, User } from "@element-plus/icons-vue";
import * as http from "@/request/http";
import { reactive, ref } from "vue";
import { ElMessage, FormRules } from "element-plus";
import { router } from "@/router/index";
const ruleFormRef = ref();

const ruleForm = reactive({
  username: "admin",
  password: "123456",
});

// 登录
function submitForm() {
  ruleFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      //发送登录请求
      http.adminInfo
        .adminLogin({
          username: ruleForm.username,
          password: ruleForm.password,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            //1.提示
            ElMessage.success("登录成功");
            //2.存储token
            localStorage.setItem("token", res.data.tokenHead + res.data.token);
            http.adminInfo.adminInfo();
            router.push('/index');
          }
        });
    } else {
      ElMessage.error("登录失败");
    }
  });
}

const validateusername = (
  rule: unknown,
  value: string | undefined,
  callback: (msg?: string) => void
) => {
  if (value === "") {
    callback("请求输入用户名");
  } else {
    callback();
  }
};
const validatepassword = (
  rule: any,
  value: any,
  callback: (error?: string | Error | undefined) => void
) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules>({
  username: [{ validator: validateusername, trigger: "blur" }],
  password: [{ validator: validatepassword, trigger: "blur" }],
});
</script>

<style lang="less" scoped>
.Login {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  .Loginfrom {
    margin: auto;
    padding: 250px 0;
    width: 420px;
    height: 250px;
    h3 {
      margin: 10px 0;
      font-size: 24px;
      color: #fff;
      text-align: center;
    }
    :deep(.el-input__wrapper) {
      background: #283443;
      height: 50px;
      box-shadow: 0 0 0 0.1px #eee;
    }
    .btns {
      width: 100%;
      height: 40px;
    }
  }
}
</style>
